<script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>
<script>
    const {
        createApp,
        h
    } = Vue



   const Mouse = {
            data() {
                return {
                    x: 0,
                    y: 0
                }
            },
            methods: {
                updated(e) {
                    this.x = e.pageX
                    this.y = e.pageY
                }
            },
            mounted() {
                window.addEventListener('mousemove', this.updated)
            },
            unmounted() {
                window.removeEventListener('mousemove', this.updated)
            },
            template:`<slot :x="x" :y="y">`,
            render() {
                return this.$slots.default&&this.$slots.default({
                    x:this.x,
                    y:this.y
                })
            }
        }

   
    //不能解决真正的问题
    const App = {
        components: {
            Mouse
        },
        template:`<Mouse v-slot="{ x,y }"> 
                    <Foo v-slot="{ foo }">
                      {{x}}{{y}}{{foo}}
                    </Foo>
                  </Mouse>`
    }
    createApp(App).mount('#app')
</script>